<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>幸运大转盘</title>

    <link rel="stylesheet" href="./GB-canvas-turntable.css">
    <link rel="stylesheet" type="text/css" href="./hlhs.css">
</head>

<body>
    <img class="bg" src="./bg.jpg" alt="">
    <div class="zhuanp">
        <section id="turntable" class="gb-turntable">
            <div class="gb-turntable-container">
                <canvas class="gb-turntable-canvas" width="600" height="600px">抱歉！浏览器不支持。</canvas>
            <!-- <ul class="gb-turntalbe-list"> -->
                <!-- <li class="gb-turntable-item"> <span style="transform: rotate(0turn)">1元红包</span> </li>
                <li class="gb-turntable-item"> <span style="transform: rotate(0.125turn)">2元红包</span> </li>
                <li class="gb-turntable-item"> <span style="transform: rotate(0.25turn)">100元红包</span> </li>
                <li class="gb-turntable-item"> <span style="transform: rotate(0.375turn)">3元红包</span> </li>
                <li class="gb-turntable-item"> <span style="transform: rotate(0.5turn)">显示器</span> </li>
                <li class="gb-turntable-item"> <span style="transform: rotate(0.625turn)">5元红包</span> </li>
                <li class="gb-turntable-item"> <span style="transform: rotate(0.75turn)">6元红包</span> </li>
                <li class="gb-turntable-item"> <span style="transform: rotate(0.875turn)">笔记本电脑</span> </li> -->
            <!-- </ul> -->
        </div>

            <a class="gb-turntable-btn" href="javascript:;">抽奖</a>
        </section>
    </div>

    <div id="loggetid">
    </div>
    <button id="btnrefresh" type="button" >刷新幸运大转盘</button>
    <button id="stop">停止</button>

    <script src="./jquery.min.js"></script>
    <script src="./GB-canvas-turntable.js"></script>
    <script>
        var g_data = [{text:'1'}
,{text:'2'}
,{text:'3'}
,{text:'4'}
,{text:'5'}
,{text:'6'}
,{text:'7'}
,{text:'8'}
,{text:'9'}
,{text:'10'}
,{text:'11'}
,{text:'12'}
,{text:'13'}
,{text:'14'}
,{text:'15'}
,{text:'16'}
,{text:'17'}
,{text:'18'}
,{text:'19'}
,{text:'20'}
,{text:'21'}
,{text:'22'}
,{text:'23'}
,{text:'24'}
,{text:'25'}
,{text:'26'}
,{text:'27'}
,{text:'28'}
,{text:'29'}
,{text:'30'}
,{text:'31'}
,{text:'32'}
,{text:'33'}
];
        document.addEventListener('DOMContentLoaded', function () {
            // gbTurntable.init({
            //     id: 'turntable',
            //     config: function (callback) {
            //         // 获取奖品信息
            //         // callback && callback(['11元红包','2元红包','3元红包','4元红包','5元红包','6元红包']);
            //         callback && callback(g_data)
            //     },
            //     getPrize: function (callback) {
            //         // 获取中奖信息
            //         var num = Math.random() * 33 >>> 0, //奖品ID
            //             chances = num; // 可抽奖次数
            //         callback && callback([num, chances]);
            //     },
            //     gotBack: function (data) {
            //         console.log('恭喜抽中' + data);
                    
            //     }
            // });
            refreshTurntable();
        }, false);


        var g_lucks = [];

        function refreshTurntable() {
            gbTurntable.init({
                id: 'turntable',
                config: function (callback) {
                    // 获取奖品信息
                    // callback && callback(['11元红包','2元红包','3元红包','4元红包','5元红包','6元红包']);
                    callback && callback(g_data)
                },
                getPrize: function (callback) {
                    // 获取中奖信息
                    var num = Math.floor((Math.random()*g_data.length)); //Math.random() * 33 >>> 0, //奖品ID
                    var chances = num; // 可抽奖次数
                    callback && callback([num, chances]);
                },
                gotBack: function (data) {
                    console.log('恭喜抽中 - ' + data);
                    g_lucks.push(data);

                    $('#loggetid').text(g_lucks.join(', '));
                    localStorage.arr = g_lucks.join(', ');

                    var arr = [];
                    for(var i=0; i<g_data.length; i++){
                        if( g_data[i].text !== data ){
                            arr.push(g_data[i]);
                        }
                    }
                    g_data = arr;       
                    
                    $('.gb-turntable-btn').addClass('disabled');
                }
            });
        }


        $('#btnrefresh').click(function(){
            $('.gb-turntalbe-list').remove();
            $('.gb-turntable-btn').removeClass('disabled');
            refreshTurntable();

        }

        $('.gb-turntable-container').click(function(){
            
        })
        );
    </script>


</body></html>